<template>
  <div id="app-container">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item />
      </el-breadcrumb>
    </div>
    <el-container>
      <el-aside>
        <el-tree
          :data="depData"
          :props="defaultProps"
          :default-expand-all="true"
          :expand-on-click-node="false"
          @node-click="nodeClick"
        />
      </el-aside>
      <el-main>
        <el-header>
          <!--表头工具栏-->
          <div class="handle-box">
            <!--<span>部门:</span>-->
            <!--&lt;!&ndash;可支持搜索&ndash;&gt;-->
            <!--<el-select v-model="deptValue" filterable placeholder="请选择" @change="getFilterData" style="width: 200px;">-->
            <!--<el-option v-for="item in depts" :key="item.value" :label="item.depname" :value="item.value"></el-option>-->
            <!--</el-select>-->
            <!--<el-button type="primary" icon="el-icon-upload2" @click="reportAll">导出</el-button>-->
            <!--<el-button type="primary" icon="el-icon-download" @click="leadingInData">导入</el-button>-->
            <!--<el-button type="primary" @click="downloadExp">下载模板</el-button>-->
            <el-button type="primary" icon="el-icon-plus" @click="addData">{{ $t('operating.add') }}</el-button>
            <el-button type="primary" icon="el-icon-delete" @click="deleteAll">{{ $t('operating.batchDelete') }}</el-button>
          </div>
        </el-header>
        <!--表格-->
        <el-table ref="multipleTable" class="datalist" :data="tableData" height="550" @selection-change="handleSelectionChange">
          <!--多选框-->
          <el-table-column type="selection" width="50" align="center" />
          <!--船舶类型-->
          <el-table-column prop="boatType" label="船舶类型" width="200" />
          <!--船舶名称-->
          <el-table-column prop="name" label="船舶名称" width="150" />
          <!--&lt;!&ndash;船舶编号&ndash;&gt;-->
          <!--<el-table-column prop="resourceId" label="船舶RFID编号" width="150"></el-table-column>-->
          <!--绑定标签-->
          <el-table-column prop="tagId" label="绑定标签" width="150" />
          <!--&lt;!&ndash;负责人姓名&ndash;&gt;-->
          <el-table-column prop="status" label="船舶状态" :formatter="shipState" width="150" />
          <!--负责人电话-->
          <el-table-column prop="boatInfo" label="船舶编号" width="150" />
          <!--操作-->
          <el-table-column :label="$t('operating.operating')" width="180">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="handleEdit(scope.$index, scope.row)">{{ $t('operating.handle') }}</el-button>
              <el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">{{ $t('operating.delete') }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            :current-page="currentPage"
            :page-sizes="[10, 25, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-main>
    </el-container>
    <!--编辑弹出框-->
    <el-dialog title="$t('operating.handle')" :close-on-click-modal="false" :visible.sync="editVisible" width="30%">
      <el-form ref="form" :model="form" label-width="120px" :rules="rules">
        <!--&lt;!&ndash;部门&ndash;&gt;-->
        <!--<el-form-item label="部门" prop="depIdx" :rules="filter_rules({required:'请选择部门'})">-->
        <!--<el-select v-model="form.depIdx" filterable placeholder="请选择">-->
        <!--<el-option v-for="item in deptSelect" :key="item.idx" :label="item.name" :value="item.idx" ></el-option>-->
        <!--</el-select>-->
        <!--</el-form-item>-->
        <!--船舶类型-->
        <el-form-item label="船舶类型" :rules="filter_rules({required:'请输入船舶类型'})">
          <el-input v-model="form.boatType" style="width: 215px;" :disabled="true" placeholder="请输入船舶类型" />
        </el-form-item>
        <!--船舶信息-->
        <el-form-item label="船舶名称">
          <el-input v-model="form.name" style="width: 215px;" placeholder="请输入船舶名称" />
        </el-form-item>
        <!--绑定标签-->
        <el-form-item label="绑定标签">
          <el-input v-model="form.tagId" style="width: 215px;" placeholder="请输入绑定标签" />
        </el-form-item>
        <!--绑定标签-->
        <!--<el-form-item label="船舶RFID编号"  :rules="filter_rules({required:'请输入船舶编号'})">-->
        <!--<el-input v-model="form.resourceId" style="width: 215px;" placeholder="请输入船舶编号"></el-input>-->
        <!--</el-form-item>-->
        <!--&lt;!&ndash;车辆名称&ndash;&gt;-->
        <el-form-item label="船舶编号" prop="boatInfo" :rules="filter_rules({required:'请输入船舶编号'})">
          <el-input v-model="form.boatInfo" style="width: 215px;" placeholder="请输入船舶编号" />
        </el-form-item>
      </el-form>
      <!--操作-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="function (){editVisible = false; editEnable = true;}">{{ $t('operating.cancel') }}</el-button>
        <el-button type="primary" @click="saveStaffEdit('form')">{{ $t('operating.determine') }}</el-button>
      </span>
    </el-dialog>

    <!--删除提示框-->
    <el-dialog :title="$t('operating.prompt')" :close-on-click-modal="false" :visible.sync="delVisible" width="">
      <div class="del-dialog-cnt">{{ $t('operating.deletePrompt') }}</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delVisible = false">{{ $t('operating.cancel') }}</el-button>
        <el-button type="primary" @click="deleteRow">{{ $t('operating.determine') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getDeptTree, deptList } from '@/utils/global.js'

export default {
  data() {
    return {
      deptValue: '',
      searchValue: '', // 空字符，用于初始化输入框

      /** *******************表格相关*********************/

      editEnable: true, // 点击的编辑or添加
      editVisible: false, // 编辑框是否可见
      editDeptVisible: false, // 编辑部门框是否可见
      delVisibleDept: false, // 部门树删除框是否可见
      editExportVisible: false, // 导入弹出框是否可见
      delVisible: false, // 删除框是否可见
      tableData: [], // 表格模拟数据
      tableDataNum: 100,
      selectIndex: -1, // 选中的行
      multipleSelection: [], // 多选下标
      del_list: [], // 要批量删除的数据
      /** *******************表格相关*********************/
      currentPage: 1, // 当前所在页
      total: 0, // 总页数
      pageSize: '10', //
      // 用户表单提交
      rules: {}, // 用户表单验证
      form: { 'boatType': 'boat' },
      departmentId: '', // 选中节点ID
      formExp: {},
      depData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      deptForm: {},
      nodeName: '',
      parentId: 0,
      deptIdx: '',
      shipIdx: [],
      deptSelect: [],
      isActive: false // 输入框是否禁用,
    }
  },
  mounted() { //  已经完成模板渲染或者el对应的html渲染后
    this.init()
  },
  methods: {
    init() {
      // 获取部门树数据
      this.getDeptList()
      // 获取船舶数据
      this.getShipList()
      this.getDept()
    },

    // 船舶类型转换
    shipState(row) {
      if (row.status == 1) {
        return '正常'
      } else if (row.status == 0) {
        return '停用'
      }
    },
    //  获取部门树列表
    getDeptList() {
      getDeptTree().then(res => {
        const RES = this.responseUse(res)
        this.depData = RES
      })
    },
    getShipList() {
      const param = {
        'pageNum': this.currentPage,
        'pageSize': this.pageSize

      }
      // if(this.departmentId != '' && this.departmentId != undefined){
      //   param.param['departmentId'] = this.departmentId
      // }
      this.$api.shipmanage.shipList(param).then(res => {
        const RES = this.responseUse(res)
        this.total = RES.totalSize
        this.tableData = RES.content
      })
    },
    // 分页导航
    handleSizeChange(val) {
      this.pageSize = val
      this.getCarList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getCarList()
    },
    //  获取部门列表
    getDept() {
      deptList().then(res => {
        const RES = this.responseUse(res)
        this.deptSelect = RES
      })
    },
    // 树节点被点击时调用
    nodeClick(draggingNode, dropNode, ev) {
      const that = this
      // 可将地图的ID设置为树结构的ID，通过点击节点，来切换地图
      // that.v_MyMessage("选择的树分支ID：" + draggingNode.id, "success");
      this.departmentId = draggingNode.id

      this.getShipList()
    },
    // 添加船舶信息
    addData() {
      if (this.$refs['form'] !== undefined) {
        this.$refs['form'].resetFields()
      }
      this.form = { 'boatType': 'boat' }
      // 需要将搜索条件置空，重新刷新列表
      this.editVisible = true
    },
    // 确认添加船舶信息
    saveStaffEdit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.editEnable) {
            const param = {
              'boatType': 'boat',
              'name': this.form.name,
              'tagId': this.form.tagId,
              'boatInfo': this.form.boatInfo
            }
            this.$api.shipmanage.saveShip(param).then(res => {
              const RES = this.responseUse(res, true)
              if (RES) {
                this.editVisible = false
                this.getShipList()
              }
            })
          } else {
            const param = {
              'boatType': 'boat',
              'name': this.form.name,
              'tagId': this.form.tagId,
              'boatInfo': this.form.boatInfo,
              'idx': this.shipIdx
            }
            this.$api.carmanage.saveAndEditCar(param).then(res => {
              const RES = this.responseUse(res, true)
              if (RES) {
                this.editVisible = false
                this.getShipList()
              }
            })
          }
        } else {
          this.v_MyMessage(this.$t('Notice.verificationFailed'))
          return false
        }
      })
    },
    // 行删除按钮响应
    handleDelete(index, row) {
      // console.log(index, row);
      this.selectIndex = index
      // row.departmentId

      this.shipIdx.push({ 'idx': row.idx })

      console.log(this.shipIdx)
      // 设置删除提示框为可见状态
      this.delVisible = true
    },
    // 批量删除
    deleteAll() {
      const length = this.multipleSelection.length
      this.del_list = this.del_list.concat(this.multipleSelection)
      for (let i = 0; i < length; i++) {
        this.shipIdx.push({ 'idx': this.multipleSelection[i].idx })
      }
      this.delVisible = true
    },
    //  确定删除
    deleteRow() {
      this.tableData.splice(this.selectIndex, 1)
      this.$api.shipmanage.deleteShip(this.shipIdx).then(res => {
        const RES = this.responseUse(res, true)
        if (RES) {
          this.delVisible = false
          this.getShipList()
          this.shipIdx = []
        }
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      // console.log(this.multipleSelection);
    },

    // 行编辑按钮响应
    handleEdit(index, row) {
      this.selectIndex = index
      this.shipIdx = row.idx
      this.form = {
        name: row.name,
        boatType: row.boatType,
        resourceId: row.resourceId,
        tagId: row.tagId
      }
      // 设置编辑框为可见状态
      this.editVisible = true
      this.editEnable = false
    },
    //  清空搜索的数据
    clearSearchValue() {
      this.searchValue = ''
    }
  }

}
</script>
<style scoped>
  #body{

    /*width: 100%;*/
    /*height: 100%;*/
  }
  .handle-box {
    padding: 10px;
    margin-bottom: 10px;
    min-width: 750px;
  }
  span {
    margin-left: 10px;
    font-size: 13px;
  }
  .datalist{
    width: 100%;
    min-width: 800px;
  }
  .el-header{
    padding:0 !important;
  }
</style>

